<template>
    <section class="comment">
        <div >
            <div class="comment-head">
                <p><Icon type="md-eye" class="icon"/>5555<Icon type="md-heart" class="icon" />12345 <span><Icon type="ios-time-outline" class="icon" />{{time | formatDate}}</span></p>
                <div class="option">
                    <span class="option-btn" @click="tousu">投诉帖子</span>
                    <span class="option-btn"><Icon type="ios-chatboxes-outline" size="20" style="margin-right: 8px"/>325</span>
                </div>
                <div style="margin-top: 15px" v-if="show === true">
                    <Input v-model="value2" placeholder="Enter something..." style="width: 720px" />
                    <span  @click="fasong1" style="background-color: #FE5371;color: white;padding: 9px 10px;border-radius: 4px;cursor: pointer">发送</span>
                </div>
            </div>
            <div v-for="(i,k) in list" :key="i.id">
                <div class="comment-user">
                    <ul>
                        <li><img :src="i.avatar" alt=""></li>
                        <li>{{i.username}}</li>
                        <li><img src="../../assets/nvshen.png" alt=""></li>
                    </ul>
                </div>
                <div class="comment-right">
                    <div class="comment-text">
                      {{i.content}}
                    </div>
                    <div class="comment-zan">
                        <span><Icon type="ios-thumbs-up-outline" class="icon" />3</span>
                        <p>{{k+1}}楼 <span><Icon type="ios-timer-outline" class="icon"/>{{i.addtime | formatDate}}</span></p>
                        <div class="option">
                            <span class="option-btn" @click="xianshi(i.id,i.user_id)">回复</span>
                            <span class="option-btn"><Icon type="ios-chatboxes-outline" size="20" style="margin-right: 8px"/>325</span>
                        </div>
                    </div>
                    <div class="reply">
                        <ul>
                            <li v-for="(y,key) in i.back" :key="key" v-if='key<numtext'>
                                <img  :src= y.picA alt="">
                                <span>{{y.usernameB}}：</span>
                                <p>回复 {{i.username}}：{{y.content}}</p>
                                <span class="time" @click="xianshi(i.id,y.touser_id)"><span>{{y.addtime}}</span>回复</span>
                                <div style="clear: both"></div>
                            </li>
                            <li style="padding: 5px 10px" v-if="i.back.length>numtext">还有{{i.back.length-numtext}}条回复<span style="float: none" @click="gengduo(i.back.length)">查看更多</span></li>
                        </ul>
                        <div style="margin-top: 5px" v-if="i.show == 2">
                            <Input v-model="value1" placeholder="Enter something..." style="width: 600px" />
                            <span  @click="fasong(i.id)" style="background-color: #FE5371;color: white;padding: 9px 10px;border-radius: 4px;cursor: pointer">发送</span>
                        </div>
                    </div>
                </div>
                <div style="clear: both"></div>
            </div>
        </div>
        <div style="text-align: center">
            <Page :total="num" />
        </div>
         <div class="text">
             <p>发表内容：</p>
             <textarea name="" id="" cols="30" rows="10" v-model="value"></textarea>
             <div>
                 <Checkbox v-model="single">匿名发帖</Checkbox><span @click="huifu" style="cursor: pointer">提交回复</span>
             </div>

         </div>
    </section>
</template>

<script>
    export default {
        inject:['reload'],
        name: "comment",
        props:['list','id','time'],
        data () {
          return {
              value:'',
              value1:'',
              value2:'',
              numtext:3,
              show:false,
              tid:'',
              single:false,
              num:''
          }
        },
        created () {
            this.num = parseInt(this.list.length)
        },
        filters:{
            formatDate:function(time){
                var date = new Date(time * 1000);
                var Y = date.getFullYear() + '-';
                var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
                var D = date.getDate() + ' ';
                var h = date.getHours() + ':';
                var m = date.getMinutes() + ':';
                var s = date.getSeconds();
                return Y+M+D+h+m+s;
            },
        },
        methods: {
            huifu () {
                let  _this = this
                _this.$post('/api/circle/PostEvaluate',
                    {
                        token:_this.$token,
                        post_id:_this.id,
                        content:_this.value
                       
                    },function (res) {
                        _this.$message.success(res.msg);

                    },function (err,errmsg) {
                        _this.$message.error(errmsg);
                    }
                )
            },
            xianshi (id,uid) {
                let _this = this
                _this.tid = uid
                console.log( uid)
                console.log(  _this.list)
                _this.list.forEach(function (i) {
                    if(i.id == id){
                       i.show = 2
                    }
                })
            },
            fasong (id) {
                let  _this = this
                _this.$post('/api/circle/PostEvaluateBack',
                    {
                        token:_this.$token,
                        touser_id:_this.uid,
                        evaluate_id:id,
                        content:_this.value1
                    },function (res) {
                        _this.$message.success(res.msg);
                        _this.list.forEach(function (i) {
                            if(i.id == id){
                                i.show = 1
                            }
                        })
                        _this.value1=''
                        _this.$emit("clickSearch",uid);

                    },function (err,errmsg) {
                        _this.$message.error(errmsg);
                    }
                )
            },
            tousu () {
                this.show =true
            },
            fasong1 () {
                let  _this = this
                _this.$post('/api/circle/PostComplaint',
                    {
                        token:_this.$token,
                        post_id:_this.id,
                        content:_this.value2
                    },function (res) {
                        _this.$message.success(res.msg);
                        _this.value2 =''
                        _this.show =false

                    },function (err,errmsg) {
                        _this.$message.error(errmsg);
                    }
                )
            },
            gengduo (length) {
                this.numtext =length
            }
        }

    }
</script>

<style scoped lang="less">
    .comment{
        width: 778px;
        margin-left: 115px;
        .comment-head{
            padding-bottom: 15px;
            .option{
                margin-top: -17px;
            }
            p{
                width: 74%;
                float: left;
                color: #fd5471;
                font-size: 12px;
                padding-left: 40px;
                .icon{
                    margin-right: 5px;
                    margin-left: 20px;
                    font-size: 15px;
                }
                span{
                    color: #999999;
                    /*padding-left: 100px;*/
                    float: right;
                }
            }
        }
        >:first-child>div{
            padding-top: 20px;
            padding-bottom: 20px;
            border-bottom:1px  dashed  #ff7c93 ;
        }
        >:first-child>:last-child{
            border-bottom:none;
        }
        .comment-user{
            width: 121px;
            height: 100%;
            text-align: center;
            float: left;
            ul{
                >:first-child{
                    img{
                        border-radius: 50%;
                        width: 94px;
                        height: 94px;
                    }
                }
                li{
                    color: #fe546f;
                    font-size: 15px;
                }
            }

        }
        .comment-right{
            width: 656px;
            float: right;
            .comment-text{
                min-height: 100px;
                color: #333333;
                font-size: 15px;
                font-weight: bold;
            }
            .comment-zan{
                padding-bottom: 15px;
                border-bottom:1px  dashed  #cbcbcb ;
                >span{
                    width: 78px;
                    height: 28px;
                    line-height: 28px;
                    display: block;
                    background-color: #fe546f;
                    color: white;
                    font-size: 15px;
                    border-radius: 4px;
                    float: left;
                    .icon{
                        font-size:26px;
                        margin-left: 12px;
                        margin-right: 15px;
                    }
                }
                >p{
                    width: 380px;
                    float: left;
                    padding-left: 180px;
                    line-height:32px;
                    color: #999999;
                    font-size: 12px;
                    span{
                        margin-left: 40px;
                        .icon{
                            font-size: 16px;
                            margin-right: 10px;
                        }
                    }
                }
            }
            .reply{
                padding-top: 5px;
                li{
                    padding-left: 8px;
                    margin-top: 3px;
                    padding-bottom: 2px;
                    padding-top: 2px;
                    background-color: #f5f5f5;
                    >span{
                        color: #fe546f;
                        font-size: 13px;
                        float: left;
                        margin-left: 10px;
                        padding-top: 3px;
                        span{
                            color: #999999;
                        }
                    }
                    img{
                        width: 24px;
                        height: 24px;
                        border-radius: 50%;
                        float: left;
                    }
                    p{
                        width: 330px;
                        float: left;
                        padding-top: 4px;
                        color: #999999;
                    }
                    .time{
                        float: right;
                        margin-right: 25px;
                        span{
                            margin-right: 50px;
                        }
                    }
                }
            }
        }
        .option {
            .option-btn {
                display: inline-block;
                width: 79px;
                text-align: center;
                height: 32px;
                line-height: 32px;
                font-size: 14px;
                border-radius: 4px;
                background-color: #ff5371;
                border-bottom: 2px solid #f4162d;
                color: #fff;
                cursor: pointer;
                margin-left: 30px;
            }
            >:last-child{
                color: #ff5371;
                margin-left:7px;
                background-color: #eeeeec;
                border-bottom: 2px solid #fdd0d5;
            }
        }
        .text{
            margin-top: 30px;
            p{
                font-size: 14px;
                font-weight: normal;
                font-stretch: normal;
                letter-spacing: 0px;
                color: #333333;
            }
            textarea{
                width: 100%;
                margin-top: 10px;
            }
            >div{
                padding-top: 20px;
                width: 260px;
                float: right;
                text-align: right;
                input{
                    margin-right: 5px;
                    margin-top: 3px;
                }
                span{
                    font-size: 12px;
                    font-weight: normal;
                    font-stretch: normal;
                    letter-spacing: 0px;
                    color: #333333;
                    margin-top: -2px;
                    vertical-align: top;
                }
                b{
                    font-size: 12px;
                    font-weight: normal;
                    font-stretch: normal;
                    letter-spacing: 0px;
                    color: #999999;
                    vertical-align: top;
                }
                >:last-child{
                    background-color: #ff5371;
                    border-radius: 4px;
                    font-size: 14px;
                    font-weight: normal;
                    font-stretch: normal;
                    letter-spacing: 0px;
                    color: #ffffff;
                    text-align: center;
                    padding: 10px 13px;
                }
            }
        }
    }
</style>